<template>
	<div class="exam webheart" v-if="row.hasOwnProperty('id')">
		<div class="exam-scoll">
			<!-- 试卷头 -->
			<el-card class="box-card exam-info">
				<ExamHeader :row="row" />
			</el-card>
			<!-- 试卷内容 -->
			<el-card class="box-card exam-wrap">
				<div class="exam-chapter-wrap" v-for="v in testPaperChapterList" :key="v.id">
					<h2>
						{{ v.title }}
						<span class="exam-chapter-des" v-if="v.des">（{{ v.des }}）</span>
					</h2>
					<div class="question-wrap">
						<QuestionItem :testSubjectVO="v.testSubjectVO" @emit="setAnswer" />
					</div>
				</div>
			</el-card>
		</div>
		<!-- 试卷操作 -->
		<ExamFooter :row="row" :answerCard="answerCard" :paperType="paperType" :testPaperChapterList="testPaperChapterList" />
	</div>
</template>
<script>
export default {
	components: {
		ExamHeader: () => import('./ExamHeader.vue'),
		ExamFooter: () => import('./ExamFooter.vue'),
		QuestionItem: () => import('./QuestionItem.vue')
	},
	data() {
		return {
			paperType: 1, //1普通试卷 2随机试卷
			row: {},
			row2: {},
			answerCard: [] //答题卡
		};
	},
	computed: {
		testPaperChapterList() {
			if (!this.row.hasOwnProperty('id')) return [];
			return this.row.testPaper.testPaperChapterList;
		}
	},
	mounted() {
		this.getList(this.$route.query.id);
	},
	methods: {
		async getList(id) {
			let res = await this.$store.dispatch('testExamGeneratePAPER', id);
			if (!res) {
				setTimeout(() => {
					window.close();
				}, 1500);
				return;
			}
			this.row = res.data[0];
			this.row2 = JSON.parse(JSON.stringify(this.row));
			this.paperType = this.row.testPaper.paperType;
			if (this.paperType == 2) {
				this.row.testPaper.testPaperChapterList.forEach((item) => {
					let testSubjectVO = [];
					item.testSubjectsList.forEach((v) => {
						let obj = v;
						this.$set(obj, 'testSubjects', v);
						testSubjectVO.push(obj);
					});
					this.$set(item, 'testSubjectVO', testSubjectVO);
				});
			}
		},
		//设置答案
		setAnswer(obj) {
			this.answerCard = this.answerCard.filter((v) => v.id != obj.id);
			if (obj.subjectsType == 1) {
				obj.answer ? this.answerCard.push(obj) : '';
			} else if (obj.subjectsType == 2) {
				obj.answer.length ? this.answerCard.push(obj) : '';
			} else if (obj.subjectsType == 3) {
				obj.answer ? this.answerCard.push(obj) : '';
			} else if (obj.subjectsType == 4) {
				let flag = true;
				obj.answer.forEach((item) => {
					if (!item.value) {
						flag = false;
						return;
					}
				});
				flag ? this.answerCard.push(obj) : '';
			} else if (obj.subjectsType == 5) {
				obj.answer ? this.answerCard.push(obj) : '';
			}
		}
	}
};
</script>
<style scoped lang="scss">
.exam {
	position: relative;
	height: calc(100vh - 100px);
	border-top: 1px solid #ddd;
	.exam-scoll {
		height: calc(100% - 150px);
		overflow-y: auto;
	}
	.exam-info {
		margin: 20px 0;
	}
	.exam-wrap {
		margin: 20px 0;
		.exam-chapter-wrap {
			h2 {
				color: #333;
				text-indent: 10px;
				background: #eee;
				height: 46px;
				line-height: 46px;
				span {
					color: #666;
					font-weight: normal;
					font-size: 14px;
				}
			}
		}
	}
}
</style>
